<template>
  <div class="sms-cell">
    <div class="sms-input-container">
      <input v-model="smsCode" class="sms-input" placeholder="请输入手机验证码"/>
      <img :src="isCorrect" v-show="showImg" style="position: absolute;width: 4vw;right: 10px"/>
    </div>
    <div class="sms-btn" @click="clickGetSMS" v-text="btnText"></div>
  </div>
</template>

<script type="text/ecmascript-6">
  import Public from '@/assets/js/public';

  let countDownNum = null;
  let countDownId = null;

  export default {
    /** kebab-case */
    name: 'cell-sms-code',

    data() {
      return {
        showImg: false,
        btnDisabled: false,
        btnText: '获取',
        smsCode: ''
      };
    },
    /** 在声明 prop 的时候，其命名应该始终使用 camelCase，而在模板和 JSX 中应该始终使用 kebab-case。
     String/Number/Boolean/Function/Object/Array/Symbol */
    props: {
      smsState: {
        required: true,
        type: Boolean,
        default: false
      }
    },

    components: {},

    methods: {
      getIcon(icon) {
        return Public.ossImg + icon + '.svg';
      },
      clickGetSMS() {
        if (this.btnDisabled) {
          return;
        }
        this.$emit('clickSMSBtn');
        // this.setTimeCountDown();
      },
      setTimeCountDown(second = 2 * 60) {
        countDownNum = second;
        this.startCountDown();
        countDownId = setInterval(() => {
          countDownNum--;
          this.btnText = '等待' + countDownNum + '秒';
          // console.log(countDownNum);
          if (countDownNum <= 0) {
            this.finishCountDown();
          }
        }, 1000);
      },
      startCountDown() {
        this.btnDisabled = true;
      },
      finishCountDown() {
        this.btnDisabled = false;
        this.btnText = '获取';
        clearInterval(countDownId);
      }
    },
    computed: {
      isCorrect() {
        if (this.smsState) {
          return this.getIcon('true');
        } else {
          return this.getIcon('false');
        }
      }
    },
    watch: {
      smsCode() {
        this.showImg = this.smsCode === '';
        this.$emit('getSMS', this.smsCode);
      }
    },
    created() {
    }
  };
</script>

<style lang="stylus" rel="stylesheet/stylus" scoped>
  @import "../../assets/stylus/main.styl";
  .flex-r
    flex-x()

  .flex-c
    flex-y()

  .center
    flex-center()

  .divider
    divider()

  .space
    space()

  .sms-input
    height 100%
    width 100%
    padding-left 10px
    word-big()

  .sms-btn
    background-color main-color
    word-vw(14px, white)
    height 100%
    width 22vw
    flex-center()

  .sms-cell
    height cell-height
    width 100%
    flex-center()

  .sms-input-container
    height 100%
    flex-x()
    justify-content flex-end
    position relative
    flex 1

  ::-webkit-input-placeholder
    word-vw(16px, third-ash)

  :-moz-placeholder
    word-vw(16px, third-ash)

  ::-moz-placeholder
    word-vw(16px, third-ash)

  :-ms-input-placeholder
    word-vw(16px, third-ash)

</style>
